<template>
	<div id="out4">
		<div id="top4">
			<a href="#/CommodityDetails"><img id="imgTop41" src="../assets/img/duanhuowang/zuojiantou.png" alt=""/></a>
			<span>阿拉粉心得</span>
		</div>
		<div class="tt">
			<span class="activeT">全部心得</span>
			<span class="rightT">晒图</span>
			<div></div>
		</div>
		<a href="#/HertXq">
		<div class="hertDD">
			<p>
				<span class="man"><img src="../assets/img/duanhuowang/huisetouxiang.png" alt=""/></span>
				昵称
				<span>2017-06-28</span>
			</p>
			<span>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</span>
			<div>
				<span><img src="../assets/img/duanhuowang/dianzan.png" alt=""/>1</span>
				<span><img src="../assets/img/duanhuowang/pinglun.png" alt=""/>10</span>
				<span><img src="../assets/img/duanhuowang/fengxiang.png" alt=""/>26</span>
			</div>
		</div>
		</a>
		<a href="#/HertXq">
		<div class="hertDD">
			<p>
				<span class="man"><img src="../assets/img/duanhuowang/huisetouxiang.png" alt=""/></span>
				昵称
				<span>2017-06-28</span>
			</p>
			<span>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</span>
			<div class="tuP"><img src="../assets/img/duanhuowang/chuncai.png" alt=""/></div>
			<div>
				<span><img src="../assets/img/duanhuowang/dianzan.png" alt=""/>1</span>
				<span><img src="../assets/img/duanhuowang/pinglun.png" alt=""/>10</span>
				<span><img src="../assets/img/duanhuowang/fengxiang.png" alt=""/>26</span>
			</div>
		</div>
		</a>
		<a href="#/HertXq">
		<div class="hertDD">
			<p>
				<span class="man"><img src="../assets/img/duanhuowang/huisetouxiang.png" alt=""/></span>
				昵称
				<span>2017-06-28</span>
			</p>
			<span>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</span>
			<div>
				<span><img src="../assets/img/duanhuowang/dianzan.png" alt=""/>1</span>
				<span><img src="../assets/img/duanhuowang/pinglun.png" alt=""/>10</span>
				<span><img src="../assets/img/duanhuowang/fengxiang.png" alt=""/>26</span>
			</div>
		</div>
		</a>
		<div class="jiaZ">加载更多</div>
	</div>
</template>

<script>
	export default {
		name: 'AlafenHert',
		methods: {
			round3: function() {
				$(".tt>span").click(function(){
					$(this).addClass("activeT").siblings("span").removeClass("activeT");
				});
				$(".hertDD>div>span").eq(2).css("border-right","none");
				$(".tt>span").eq(1).click(function(){
					$(".hertDD").eq(0).css("display","none");
					$(".hertDD").eq(2).css("display","none");
					$(".jiaZ").css("margin-top","44rem");
				});
				$(".tt>span").eq(0).click(function(){
					$(".hertDD").css("display","block");
					$(".jiaZ").css("margin-top","15rem");
				});
			},
		},
		mounted: function() {
			//只有在mounted之后，才可以执行dom操作，也就是说可以在这个方法里面执行那些需要加载立即执行的方法
			this.round3();
		},
	}
</script>

<style>
	#out4{
		background: #f2f2f2;
	}
	a{
		text-decoration: none;
		color: black;
	}
	#out4>.jiaZ{
		text-align: center;
		font-size: 2.4rem;
		margin-top: 15rem;
		padding-bottom: 3rem;
	}
	#top4 {
		width: 100vw;
		height: 9.6rem;
		background: #e53e42;
		color: white;
		display: flex;
		position: fixed;
		z-index: 10;
		align-items: center;
		text-align: center;
		justify-content: space-around;
	}
	#imgTop41 {
		width: 2.3rem;
		height: 3.8rem;
	}
	
	#top4>span {
		width: 57.6rem;
		height: 3.6rem;
		font-family: MicrosoftYaHei;
		font-size: 3.6rem;
		font-weight: normal;
		font-stretch: normal;
		line-height: 3.6rem;
		box-sizing: border-box;
		padding-right: 10rem;
	}
	.tt{
		width: 72rem;
		height: 8rem;
		border-bottom: 0.1rem #CCCCCC solid;
		padding-top: 9.6rem;
		position: relative;
		background: white;
	}
	.tt>div{
		position: absolute;
		top: 10.6rem;
		left: 50%;
		margin-left: -0.1rem;
		width: 0.2rem;
		height: 6rem;
		background-color: #cccccc;
	}
	.tt>span{
		float: left;
		width: 36rem;
		box-sizing: border-box;
		text-align: center;
		line-height: 8rem;
		font-size: 3rem;
	}
	.tt>.activeT{
		color: red;
		border-bottom: 0.1rem solid red;
	}
	.tt>.rightT{
		float: right;
	}
	.hertDD{
		background: white;
		overflow: hidden;
		padding-top: 2rem;
		margin-bottom: 2rem;
	}
	.hertDD>.tuP{
		width: 26rem;
		height: 20rem;
		border: 0.1rem solid #CCCCCC;
		margin-left: 2rem;
	}
	.hertDD>.tuP>img{
		width: 6.2rem;
		height: 13.8rem;
	}
	.hertDD span{
		font-size: 2.4rem;
	}
	.hertDD>p{
		display: flex;
		align-items: center;
		justify-content: space-around;
		font-size: 2.8rem;
	}
	.hertDD>p>.man{
		width: 8rem;
		height: 8rem;
		border-radius: 50%;
		border: 0.1rem solid #CCCCCC;
		text-align: center;
		box-sizing: border-box;
		padding-top: 1rem;
	}
	.hertDD>p>.man>img{
		width: 4.4rem;
		height: 5rem;
	}
	.hertDD>p>span{
		width: 50rem;
		text-align: right;
	}
	.hertDD>span{
		position: relative;
		float: left;
		padding: 2rem;
	}
	.hertDD>div{
		height: 8rem;
		border-top: 0.1rem solid #CCCCCC;
		margin-top: 11.9rem;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}
	.hertDD>div>span{
		box-sizing: border-box;
		width: 24rem;
		height: 4rem;
		text-align: center;
		border-right: 0.2rem solid #CCCCCC;
	}
	.hertDD>div>span>img{
		width: 2.4rem;
		height: 2.4rem;
		margin-right: 2rem;
	}
</style>